<template>
    <div>
        <el-form
                :rules="rules"
                ref="RegisterForm"
                v-loading="loading"
                element-loading-text="正在注册..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :model="RegisterForm"
                class="loginContainer">
            <h3 class="loginTitle">欢迎注册</h3>
            <el-form-item label="用户账号" prop="account">
                <el-input size="normal" type="text" v-model="RegisterForm.account" auto-complete="off"
                          placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input size="normal" type="password" v-model="RegisterForm.password" auto-complete="off"
                          placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordCheck">
                <el-input size="normal" type="password" v-model="RegisterForm.passwordCheck" auto-complete="off"
                          placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identity">
                <el-input size="normal" type="text" v-model="RegisterForm.identity" auto-complete="off"
                          placeholder="请输入身份证号"></el-input>
            </el-form-item>


            <el-button size="normal" type="primary" style="width: 100%;" @click="submitRegister(RegisterForm)">注册
            </el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.RegisterForm.passwordCheck !== '') {
                        this.$refs.RegisterForm.validateField('passwordCheck');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.RegisterForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                RegisterForm: {
                    account: '',
                    password: '',
                    passwordCheck: '',
                    identity: ''
                },
                checked: true,
                rules: {
                    account: [{message: '请输入账号', trigger: 'blur'}],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    passwordCheck: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    identity: [{message: '请输入身份证号', trigger: 'blur'}],
                },
            }
        },

        methods: {

            submitRegister(formName) {

                    if (formName.password==formName.passwordCheck) {
                        this.postRequest('/registry/post', this.RegisterForm);
                        alert('注册成功!');
                        this.$router.push({path: '/'})
                    } else {
                        console.log('注册失败!!');
                        return false;
                    }

            },

        }
    }
</script>

<style scoped>

    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }

    .el-form-item__content {
        display: flex;
        align-items: center;
    }

</style>